<template>

    <view > 
      <!-- 头部背景图片 -->
      <view class="title">
          <image mode="widthFix" :src="album.cover"></image>
          <view class="wen_list">
              <view class="wen">{{album.name}}</view>
              <view class="btn" @click="btn" data-index="2">关注订阅</view>
          </view>
      </view>
        <!-- 头部背景图片 结束-->
        <!-- 专辑详情开始 -->
      <view class="xinxi">
          <view class="title">
              <image mode="widthFix" :src="album.user.avatar"></image>
              <view class="name">{{album.user.name}}</view>
          </view>
          <view class="wen_p">
           <text> {{album.desc}}</text>
          </view>
      </view>
        <!-- 专辑详情结束 -->
        <view class="photo">
            <view class="photo_item"
            v-for="(item,index) in wallpaper"
            :key="item.id"
            > 
            <ima-data :list="wallpaper" :index="index">
   <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
            </ima-data>
              
            </view>
        </view>
    </view>
</template>

<script>
import imaData from "@/components/imgData/index.vue"
export default {
    data(){
        return {
            params:{
                // 获取多少条数据
                limit:30,
                order:"new",
                skip:0,
                first:1
            },
            id:-1,
            album:{},
            wallpaper:[],
            hide:true
        }
    },
    components:{
        imaData
    },
   onLoad(options){
      
        uni.setNavigationBarTitle({title:"专辑详情"})
         console.log(options)
        this.id=options.id;
        // this.id="5eaa795de7bce739655144cc"
        this.getList();
   },
   onReachBottom(){
       if(this.hide){
        this.params.first=0
        this.params.skip+=this.params.limit
        this.getList()
       }else{
           uni.showToast({
               title: '没有可加载内容',
               icon: 'none',
           });
       }
       
   },
   methods:{
       btn(options){
           
           console.log(options,"123")
       },
       getList(){
           this.request({
               url:`http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
               data:this.params
           })
           .then(result=>{
               console.log(result)
          
            // 避免每次加载更多图片时重复加载
            if(Object.keys(this.album).length===0){
                //    头部信息
            this.album=result.res.album
            }
              // 判断是否没有了更多照片内容,没有时那就直接return
            if(result.res.wallpaper.length===0){
                this.hide=false;
               uni.showToast({
               title: '没有可加载内容',
               icon: 'none',
                });
                return;
            }
            // 专辑照片
            this.wallpaper=[...this.wallpaper,...result.res.wallpaper]
           })
       }
   }
}
</script>

<style lang="scss" scoped>
   .title{
       position: relative;
       image{}
       .wen_list{
           position: absolute;
           width: 100%;
           left: 0;
           bottom:20rpx;
           padding:0 20rpx;
           display:flex;
           justify-content: space-between;
           .wen{
               color:white;
               font-size:40rpx;
               font-weight: 550;
           }
           .btn{
               padding:10rpx 15rpx;
               border-radius: 10rpx;
               background-color:$color;
               color:white;
               font-size:30rpx;

           }
       }
   } 
   .xinxi{
     padding:15rpx;
       .title{
           display: flex;
           align-items: center;
           image{
               width:50rpx;
               border-radius: 50%;
           }
           .name{
               margin-left:20rpx;
           }
       }
       .wen_p{
         padding:20rpx 0;
       }
   }
   .photo{
       display:flex;
       flex-wrap:wrap;
       .photo_item{
           border:3rpx solid #fff;
           width:33.33%;
           height:210rpx;
           image{
               width:100%;
               height:210rpx;
           }
       }
   }
</style>